<!DOCTYPE html>
<html>
<head>
	<title>slidetab demo</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link media="screen" type="text/css" href="http://a.tbcdn.cn/app/dp/vd/css/index.css" rel="stylesheet">
<script type="text/javascript" src="http://a.tbcdn.cn/s/yui/3.4.1/build/yui/yui-min.js"></script>
<style>
body{background:none;}
.hidden {display:none;}
#tbv-imgscroll{width:750px;overflow:hidden;}
#tbv-imgscroll .showbox {overflow:hidden;position:relative;}
a,img{border:0;}


	body { font: 14px Georgia,"Times New Roman",Times,sans-serif; color: #444; }
	h1 { font-size: 26px; color: #00859D; font-family: Constantia,serif; }
	h3 { font-size: 14px; color: #555; margin: 15px 0 5px; }
	code {font-family:"Courier New"}

</style>

</head>
<body>
<h1>tab-carousel</h1>
旋转木马
<hr size=1 />
<a id="J_pre" href="#">上一页</a> <a id="J_next" href="#">下一页</a>
<div class="fixfloat t-slide" id="tbv-imgscroll">				
	<ul class="imglist dpd-slidetab tab-nav hidden">
		<li class="fixfloat on"></li>
		<li class="fixfloat"></li>
		<li class="fixfloat"></li>
		<li class="fixfloat"></li>
		<li class="fixfloat"></li>								
	</ul>
	<div class="showbox dpd-slidecontent tab-content">
		<div class="tab-pannel">
			<img src="http://img02.taobaocdn.com/tps/i2/T1Gk8nXaJkXXXXXXXX-505-320.jpg">
		</div>
		<div class="tab-pannel">
			<img src="http://img07.taobaocdn.com/tps/i7/T1UA4nXeVlXXXXXXXX-505-320.jpg">
		</div>
		<div class="tab-pannel">
				<img src="http://img01.taobaocdn.com/tps/i1/T1sk8nXhlkXXXXXXXX-505-320.jpg">
		</div>
		<div class="tab-pannel">
				<img src="http://img02.taobaocdn.com/tps/i2/T1ik4nXd8mXXXXXXXX-505-320.jpg">
		</div>
		<div class="tab-pannel">
				<img src="http://img06.taobaocdn.com/tps/i6/T1RA8nXmFjXXXXXXXX-505-320.jpg">
		</div>
	</div>
</div>
<hr size=1 />
<script>
YUI({
	modules:{
		'slide':{
			fullpath:'slide.js',
			requires:['node','anim']
		}
	}
}).use('slide','dump',function(Y){
	var C = new Y.Slide('tbv-imgscroll',{
		autoSlide:true,
		//eventype:'mouseover',
		effect:'h-slide',
		selectedClass:'on',
		timeout:3000,
		speed:1,
		carousel:true
	});
	Y.one('#J_pre').on('click',function(e){
		e.halt();
		C.previous();
	});
	Y.one('#J_next').on('click',function(e){
		e.halt();
		C.next();
	});
});
</script>
</body>
</html>

